<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
        }

        li:nth-child(odd) {
            background-color: aquamarine;
            color: white;
            padding: 10px;
        }

        li {
            padding: 10px;
        }
    </style>
</head>
<body>
<script>

    let lessons = [
        {title: 'hello'},
        {title: 'world'},
        {title: 'xixi'}
    ]

    function template() {
        return `
            <ul>
                ${lessons.map(i => '<li>' + i.title + '</li>').join("")}
            </ul>
        `
    }

    document.body.innerHTML = template()
</script>
</body>
</html>
